<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getFlowList">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="addFlow">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="flowList" highlight-current-row v-loading="listLoading" style="width: 100%;">

			<el-table-column prop="name" label="名称" width="300">
			</el-table-column>
			<el-table-column label="类别" width="180">
				<template scope="scope">
					<span v-text="getClassName(scope.row.class)"></span>
				</template>
			</el-table-column>


			<el-table-column label="最后编辑时间" min-width="180" prop=''>
				<template scope="scope" >
					<span v-text="fmtDate(scope.row.changeTime)"></span>
				</template>

			</el-table-column>
			<el-table-column label="是否默认" min-width="180" prop='isDefault'>
				<template scope="scope">

					<span v-if="scope.row.isDefault">默认</span>
				</template>
			</el-table-column>


			<el-table-column label="操作" width="80">
				<template scope="scope">
					<el-button size="small" @click="toSaveFlow(scope.$index, scope.row)">编辑</el-button>

				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">

			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="ShowSave" size='large' :close-on-click-modal="false">
			<el-form :model="currObj" label-width="80px" :rules="editFormRules" ref="currObj">
				<el-form-item label="名称" prop="name">
					<el-input v-model="currObj.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="默认" prop="name">
					<el-switch v-model="isDefault" @change="changeDefault" on-color="#13ce66" off-color="#ff4949">
					</el-switch>
				</el-form-item>
				<el-form-item label="类别">
					<el-select v-model="currObj.class" placeholder="请选择">
						<el-option v-for="classItem  in  classArray" :label="classItem.name" :value="classItem.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="currObj.memo"></el-input>
				</el-form-item>
				<el-form-item label="节点">

					<!--节点列表组件-->
					<flowNodeList s="flowList" :currObj='currObj' :currNodeObj='currNodeObj' v-on:toSaveNode="toSaveNode" v-on:exeCustomerOrderFlow="exeCustomerOrderFlow"></flowNodeList>

				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="ShowSave = false">取消</el-button>
				<el-button type="primary" @click.native="saveFlow" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--节点弹窗-->
		<el-dialog title="编辑节点" v-model="ShowSaveNode" :close-on-click-modal="false">

			<div slot="footer" class="dialog-footer">
				<el-button @click.native="ShowSaveNode = false">取消</el-button>
				<el-button type="primary" @click.native="saveNode" :loading="editLoading">保存节点</el-button>
			</div>
			<flowNode :currObj='currObj' :currNodeObj='currNodeObj' :ShowSaveNode='ShowSaveNode' :taskClassArray='taskClassArray' :editLoading='editLoading'>
			</flowNode>
		</el-dialog>


	</section>
</template>
<script src="./flowList.js"></script>

<style lang="scss" scoped>
	.card {
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.btn_1 {}
</style>